<template>
    <div class="container">
       <div class="header">
            <div class="logo">蜗牛学苑BOSS系统</div>
       </div>
       <div class="main">
            <div class="silder">
                <ul>
                    <li>
                        <span>控制面板</span>
                        <ul class="sul">
                            <li>
                                <router-link to="/home/workplace">工作台</router-link>
                            </li>
                            <li>
                                <router-link to="/home/analysis">统计报表</router-link>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>学员管理</span>
                        <ul class="sul">
                            <li>
                                <router-link to="/home/studentList">学生列表</router-link>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>系统管理</span>
                        <ul class="sul">
                            <li>班主任管理</li>
                            <li>教师管理</li>
                            <li>专业管理</li>
                            <li>班级管理</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="content">
                <!-- 设置二级路由的出口 -->
                <!-- <keep-alive exclude="analysis">
                    <router-view></router-view>
                </keep-alive> -->
                <keep-alive>
                    <router-view v-if="$route.meta.iskeepAlive"></router-view>
                </keep-alive>
                 <router-view v-if="!$route.meta.iskeepAlive"></router-view>
            </div>
       </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .container{
        display: flex;
        flex-direction: column;
        min-height: 600px;
        .header{
            display: flex;
            height: 50px;
            background-color: #008BD3;
            align-items: center;
            .logo{
                font-family: '华文琥珀';
                font-size: 28px;
                color: white;
                margin-left: 20px;
            }
        }
        .main{
            display: flex;
            flex-grow: 1;
            height: 100%;
            .silder{
                display: flex;
                width: 200px;
                background-color: #F5F5F5;
                justify-content: center;
            }
            .content{
                margin: 10px;
                flex-grow: 1;
                background-color: white;
            }
        }
        .sul{
            margin-left: 20px;
        }
        li{
            line-height: 35px;
        }
        a{
            text-decoration: none;
            color: #333;
        }

    }
</style>